<template>
  <view class="box">
    <view class="border_kong"></view>
    <view class="top_title">
      <view class="title">{{info.title}}</view>
      <view class="title_time">{{info.createtime}}</view>
    </view>
    <view class="big_box">
      <view class="offer_cennt text-center">
        <block>
          <image v-for="(el,index) in info.images"
                 :key="index"
                 class="offer_cennter "
                 :src="$serverIp+el"
                 mode=""></image>
        </block>
      </view>
      <view class="center_mage ">
        <view class='chapterview'>
          <image src="../../static/image/zpzx_ico_yd@2x.png"
                 mode=""></image>
          <view class="offer_num">{{info.read_num}}</view>

        </view>
      </view>
    </view>
    <view class="border_kong"></view>
    <view class="other_offer">
      <view v-if="last.is_have!=0"
            @click="toggle(last.id)"
            class="other_top">上一篇：{{last.title}}</view>
      <!-- <view class="other_kong"></view> -->
      <view v-if="next.is_have!=0"
            @click="toggle(next.id)"
            class="other_ran">下一篇：{{next.title}}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      info: {},
      last: {},
      next: {}
    }
  },
  onLoad(e) {
    this.id = e.id
    this.getoff()
  },
  methods: {
    async getoff() {
      let { data } = await this.$http.post('/offer/read', { id: this.id })
      let { info, last, next } = data.data
      this.info = info
      this.last = last
      this.next = next
    },
    toggle(id) {
      this.id = id
      this.getoff()
    }
  }
}
</script>

<style>
.box {
  width: 100%;
  /* height: 100%; */
  height: auto;
  color: #333333;
}
.other_offer {
  width: 100%;
  height: auto;
  background-color: #ffffff;
}
.other_top {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 50rpx;
  border-bottom: 1rpx solid #f5f5f5;
}
.other_kong {
  width: 690rpx;
  height: 1rpx;
  background: #000000;
  opacity: 0.1;
  margin: 0 auto;
}
.other_ran {
  width: 100%;
  height: 100rpx;
  padding: 0 50rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.big_box {
  width: 100%;
  /* height: 1040rpx; */
  height: auto;
  /* border:1rpx solid red; */
  background-color: #ffffff;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.offer_cennter {
  box-sizing: border-box;
  width: 690rpx;
  height: 900rpx;
  margin-top: 30rpx;
}

.border_kong {
  width: 100%;
  height: 20rpx;
  background-color: #f5f5f5;
}

.top_title {
  width: 100%;
  height: 80rpx;
  line-height: 50rpx;
  padding-left: 30rpx;
  background-color: #ffffff;
  box-sizing: border-box;
}

.title {
  padding-top: 20rpx;
  font-size: 33rpx;
  font-weight: 600;
  box-sizing: border-box;
}

.title_time {
  color: #999999;
  font-size: 22rpx;
  margin-bottom: 50rpx;
}

.center_mage {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 90rpx;
  background-color: #ffffff;
  padding-right: 30rpx;
  /* border: solid 1rpx red; */
  box-sizing: border-box;
}
.chapterview {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.offer_num {
  font-size: 22rpx;
  width: 42rpx;
  text-align: center;
}

.chapterview image {
  width: 42rpx;
  height: 40rpx;
  border-left-color: #ffffff;
  margin-bottom: 10rpx;
}
</style>
